<template>
  <div id="app">
    <el-container>
      <el-header v-if="userStore.isLoggedIn" class="header">
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" :router="true">
          <template v-if="userStore.role === 'ADMIN'">
            <el-menu-item index="/admin/dashboard">数据统计</el-menu-item>
            <el-menu-item index="/admin/announcements">公告管理</el-menu-item>
            <el-menu-item index="/admin/service">售后管理</el-menu-item>
            <el-menu-item index="/admin/tickets">工单处理</el-menu-item>
            <el-menu-item index="/admin/profile">个人中心</el-menu-item>
          </template>
          <template v-else-if="userStore.role === 'USER'">
            <el-menu-item index="/user/announcements">查看公告</el-menu-item>
            <el-menu-item index="/user/submit">提交售后</el-menu-item>
            <el-menu-item index="/user/tickets">售后进度</el-menu-item>
            <el-menu-item index="/user/profile">个人中心</el-menu-item>
          </template>
          <el-sub-menu index="user-actions" style="float: right;">
            <template #title>{{ userStore.username }}</template>
            <el-menu-item @click="logout">退出登录</el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-header>
      <el-main class="main-content">
        <router-view />
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useUserStore } from './stores/user'

const router = useRouter()
const route = useRoute()
const userStore = useUserStore()

const activeIndex = ref('')

watch(route, (newRoute) => {
  activeIndex.value = newRoute.path
}, { immediate: true })

const logout = () => {
  userStore.logout()
  router.push('/auth')
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}

.el-header {
  padding: 0;
  border-bottom: solid 1px var(--el-menu-border-color);
}

.main-content {
  padding: 20px;
}
</style>